<!DOCTYPE html>
<!-- sRGB blue, progressively reduced in LCH Chroma to a neutral grey -->
<textarea id="foo" cols="30" rows="10"></textarea>
<!-- <script src="color.js" type="module"></script> -->
<script type="module">
import Color from "https://colorjs.io/color.js";
let rects = [];
let reds = [];
let greens = [];
let blues = [];
let color = new Color("blue");
for (let i = 131.2; i >=0; i--) {
    color.chroma = i;
    rects.push(`<rect width="1.1" height="10" x="${i}" fill="${color}" />`);
    let ug = Color.spaces.srgb.toLinear(color.coords);
    reds.push(`${i},${40 - (ug[0]*25)}`);
    greens.push(`${i},${40 - (ug[1]*25)}`);
    blues.push(`${i},${40 - (ug[2]*25)}`);
}
foo.value= `<svg xmlns="http://www.w3.org/2000/svg" viewBox="-4 -4 140 30">
    <desc>Show a gradient from sRGB blue,
in LCH,
as Chroma is reduced from the max value (131) to near-zero
demonstrating a purpling mid-way.
1.1 is an egregious hack to avoid limited subpixel precision compositing artifacts
</desc>
${rects.join("\n")}
<rect width="132" height="25" y="15" fill="none" stroke="grey" stroke-width="0.2"/>
<polyline fill="none" stroke-width="0.2" stroke="red" points="${reds.join(" ")}" />
<polyline fill="none" stroke-width="0.2" stroke="green" points="${greens.join(" ")}" />
<polyline fill="none" stroke-width="0.2" stroke="blue" points="${blues.join(" ")}" />
</svg>`;
</script>